<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简谱演奏</title>
    <script type="module" src="/src/main.ts"></script>
    <link rel="stylesheet" href="/src/scss/style.scss"/>
</head>
<body>
    <ul class="container">
        <li class="piano-item" data-symbol="c3">1</li>
        <li class="piano-item" data-symbol="d3">2</li>
        <li class="piano-item" data-symbol="e3">3</li>
        <li class="piano-item" data-symbol="f3">4</li>
        <li class="piano-item" data-symbol="g3">5</li>
        <li class="piano-item" data-symbol="a3">6</li>
        <li class="piano-item" data-symbol="b3">7</li>

        <li class="piano-item" data-symbol="c4">1</li>
        <li class="piano-item" data-symbol="d4">2</li>
        <li class="piano-item" data-symbol="e4">3</li>
        <li class="piano-item" data-symbol="f4">4</li>
        <li class="piano-item" data-symbol="g4">5</li>
        <li class="piano-item" data-symbol="a4">6</li>
        <li class="piano-item" data-symbol="b4">7</li>

        <li class="piano-item" data-symbol="c5">1</li>
        <li class="piano-item" data-symbol="d5">2</li>
        <li class="piano-item" data-symbol="e5">3</li>
        <li class="piano-item" data-symbol="f5">4</li>
        <li class="piano-item" data-symbol="g5">5</li>
        <li class="piano-item" data-symbol="a5">6</li>
        <li class="piano-item" data-symbol="b5">7</li>

        <li class="piano-item" data-symbol="c6">1</li>
        <li class="piano-item" data-symbol="d6">2</li>
        <li class="piano-item" data-symbol="e6">3</li>
        <li class="piano-item" data-symbol="f6">4</li>
        <li class="piano-item" data-symbol="g6">5</li>
        <li class="piano-item" data-symbol="a6">6</li>
        <li class="piano-item" data-symbol="b6">7</li>
    </ul>
</body>
</html>